<template>
  <view class="app">
    <view class="price-box">
      <text class="price" v-if="price && price != null">{{ price }}</text>
      <view class="flex_center" v-if="time">
        <text>剩余支付时间</text>
        <u-count-down
          @change="onChange"
          :time="time"
          format="HH:mm:ss"
        ></u-count-down>
      </view>
    </view>

    <view class="pay-type-list">
      <view class="type-item b-b" @click="changePayType(2)">
        <u--image
          class="m24"
          src="https://res.jiyaqi.com/pet/miniapp/public/pay_ic_wechat pay.png"
          width="48rpx"
          height="48rpx"
        >
        </u--image>
        <view class="con" style="margin-left: 30rpx">
          <text class="tit">微信支付</text>
          <text>推荐使用微信支付</text>
        </view>
        <label class="radio">
          <radio value="" color="#FF5900" :checked="payType == 2" />
        </label>
      </view>
      <!--    <view class="type-item b-b" @click="changePayType(1)">
        <u--image class="m24" :src="require('@/static/public/pay_ic_alipay.png')" width="48rpx" height="48rpx">
        </u--image>
        <view class="con" style="margin-left: 30rpx;"><text class="tit">支付宝支付</text></view>
        <label class="radio">
          <radio value="" color="#FF5900" :checked="payType == 1" />
        </label>
      </view> -->
    </view>
    <view class="mix-btn_box">
      <!-- <text class="mix-btn" @click="confirm">立即支付</text> -->
      <button
        class="mix-btn"
        @click="confirm"
        :disabled="confirming"
        :loading="confirming"
      >
        {{ buttonText }}
      </button>
    </view>
  </view>
</template>

<script>
import { getPaymentInfo, paymentCallback } from '@/api/pay/pay'
import pageMixin from '@/mixins/pageMixin'
export default {
  mixins: [pageMixin],
  data() {
    return {
      payType: 2,
      orderInfo: {},
      orderId: null, // 服务订单id 或者 药品订单的 orderId
      orderType: '',
      outTradeNo: null, //订单号
      price: null,
      time: null,
      timeOverModal: false, //防止弹窗弹多次
      buttonText: '立即支付',
      confirming: false,
      endTime: null, //传来的时间戳
      docInfo: {},
    }
  },
  computed: {},
  onLoad(options) {
    if (options.type) this.orderType = options.type
    this.outTradeNo = options.outTradeNo
    this.price = options.price
    if (options.endTime) {
      this.endTime = options.endTime
      this.coutTimeOver(options.endTime)
    }
    // orderId 服务id
    if (options.orderId) this.orderId = options.orderId
    if (options.docInfo) {
      this.docInfo = JSON.parse(options.docInfo)
    }
  },
  onShow() {
    this.confirming = false
  },
  onBackPress(options) {
    this.goBack()
    return true
  },

  methods: {
    //选择支付方式
    changePayType(type) {
      this.payType = type
    },
    //确认支付
    async confirm() {
      try {
        if (this.confirming) return //防止重复提交
        let payType =
          this.payType == 2 ? 'wxpay' : this.payType == 1 ? 'alipay' : ''
        console.log(this.outTradeNo, '订单号')
        console.log(this.payType, '支付方式')
        this.confirming = true
        this.buttonText = '支付中'
        getPaymentInfo({
          outTradeNo: this.outTradeNo,
          payMode: this.payType,
          amount: this.price,
          paymentBody: this.orderType == 'drug' ? '药品支付' : '问诊支付',
        })
          .then(res => {
            console.log(res, this.docInfo, '支付接口返回')
            let orderInfo = JSON.stringify(res)

            uni.requestPayment({
              orderInfo: orderInfo,
              ...res.data,
              success: res => {
                // let rawdata = JSON.parse(res.rawdata)
                paymentCallback({ outTradeNo: this.outTradeNo })
                  .then(res => {
                    uni.showToast({
                      title: '支付成功',
                      icon: 'success',
                      duration: 2000,
                    })
                    uni.redirectTo({
                      url: `/pages/money/${
                        this.orderType == 'drug'
                          ? 'drugPaySuccess'
                          : 'paySuccess'
                      }?type=${this.orderType}&orderId=${
                        this.orderId
                      }&outTradeNo=${this.outTradeNo}&price=${
                        this.price
                      }&docInfo=${JSON.stringify(this.docInfo)}`,
                    })
                  })
                  .catch(err => {
                    uni.showToast({
                      title: err,
                      icon: 'success',
                      duration: 2000,
                    })
                    uni.redirectTo({
                      url: `/pages/money/${
                        this.orderType == 'drug' ? 'drugPayError' : 'payError'
                      }?type=${this.orderType}&orderId=${
                        this.orderId
                      }&outTradeNo=${this.outTradeNo}&price=${
                        this.price
                      }&endTime=${this.endTime}`,
                    })
                  })
              },
              fail: e => {
                uni.showToast({
                  title: '支付失败',
                  icon: 'error',
                })
                this.confirming = false
                this.buttonText = '立即支付'
                uni.redirectTo({
                  url: `/pages/money/${
                    this.orderType == 'drug' ? 'drugPayError' : 'payError'
                  }?type=${this.orderType}&orderId=${this.orderId}&outTradeNo=${
                    this.outTradeNo
                  }&price=${this.price}&endTime=${this.endTime}`,
                })

                console.log(e, 'e=========================')
              },
            })
          })
          .catch(err => {
            console.log(err, '支付接口报错')
          })
      } catch (err) {
        console.warn(err, 'err==========================')
      }
    },
    //倒计时
    onChange(e) {
      if (e.days == 0 && e.hours == 0 && e.minutes == 0 && e.seconds == 0) {
        //倒计时结束
        if (this.timeOverModal) return
        this.timeOverModal = true
        uni.showModal({
          title: '提示',
          content: '未及时支付，订单已失效',
          confirmText: '确定',
          showCancel: false,
          success: res => {
            if (res.confirm) {
              this.back()
            }
          },
        })
      }
    },
    //计算倒计时时间
    coutTimeOver(endTime) {
      console.log(endTime, 'endtime')
      // 当前系统时间
      let NowTime = new Date()
      let t = endTime - NowTime.getTime()
      this.time = t
      console.log('this.time', this.time)
      // if (t <= 0) {
      //   this.goBack()
      // }
    },
    goBack() {
      console.log(this.orderType)

      if (this.orderType == 'server') {
        //医院服务回跳
        uni.redirectTo({
          url: '/pages/server/orderList',
        })
      }
      if (this.orderType == 'serverDetail') {
        //医院服务回跳
        uni.redirectTo({
          url: `/pages/server/orderInfo?id=${this.orderId}`,
        })
      }
      if (this.orderType == 'medicalType') {
        //问诊订单回跳
        uni.redirectTo({
          url: '/pages/medical/inquiryList?state=0',
        })
      }
      if (this.orderType == 'petParkOrder') {
        //寄养订单回跳
        uni.redirectTo({
          url: '/pages/server/orderList',
        })
      }
      if (this.orderType == 'protect') {
        //联盟捐粮列表 回跳
        uni.redirectTo({
          url: '/pages/alliance/protect',
        })
      }
      if (this.orderType == 'intelligence') {
        //智商联盟报名 回跳
        uni.redirectTo({
          url: '/pages/alliance/Intelligence',
        })
      }

      if (this.orderType == 'drug') {
        //药房
        uni.redirectTo({
          url: `/pages/inquiryModule/order/drugOrder?current=0`,
        })
      }
    },
  },
}
</script>

<style lang="scss">
.payBtn {
  font-size: 32rpx;
  font-weight: 500;
}
.app {
  width: 100%;
}
.m24 {
  margin: 0 24rpx;
}
.price-box {
  height: 265rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #909399;

  .price {
    font-size: 50rpx;
    color: #303133;
    margin-top: 12rpx;
    &:before {
      content: '￥';
      font-size: 40rpx;
    }
  }
}
::v-deep .u-count-down__text {
  text-align: center;
}
.pay-type-list {
  margin: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  .type-item {
    height: 120rpx;
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;
    position: relative;
  }

  .icon {
    width: 100rpx;
    font-size: 52rpx;
  }
  .icon-erjiye-yucunkuan {
    color: #fe8e2e;
  }
  .icon-weixinzhifu {
    color: #36cb59;
  }
  .icon-alipay {
    color: #01aaef;
  }
  .tit {
    font-size: $font-lg;
    color: $font-color-dark;
    margin-bottom: 4rpx;
  }
  .con {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: $font-sm;
    color: $font-color-light;
  }
}
.mix-btn_box {
  position: fixed;
  width: 100%;
  height: 80rpx;
  bottom: 0;
  padding: 0 40rpx;
  margin-bottom: 40rpx;
  .mix-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 500;
    background: #FF5900;
    border-radius: 40rpx;
  }
}
</style>
